<template>
  <view class="container">
    <view class="container_box">
      <view class="row border-bottom">
        <view class="label">申请日期</view>
        <view class="ipt" style="text-align: right">
          <picker mode="date" class="pick flex a-item fd" :value="form.busDate" @change="bindbusDateChange">
            <view class="uni-input" style="color: #333">{{ form.busDate ? form.busDate : '请选择' }}</view>
          </picker>
        </view>
      </view>
      <view class="row border-bottom">
        <view class="label">请假开始时间</view>
        <view class="ipt" style="text-align: right">
          <leeDatetime @change="startDateChange" placeholder="请选择" :value="form.beginTime" />
        </view>
      </view>
      <view class="border-bottom row">
        <view class="label">请假结束时间</view>
        <view class="ipt" style="text-align: right">
          <leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择" :value="form.endTime" />
        </view>
      </view>
      <view class="row">
        <view class="label flex">请假类型</view>
        <picker mode="selector" style="flex-grow: 1; text-align: right" :range="typeList" @change="changedeptId" range-key="name">
          <view class="picker">
            {{ type ? type : '请选择' }}
          </view>
        </picker>
      </view>
    </view>
    <view class="container_box">
      <view>请假原因</view>
      <view class="ipt">
        <input type="text" v-model="form.reason" placeholder="请输入" />
      </view>
    </view>
    <view class="container_box" v-if="showApprover">
      <view>审批人</view>
      <view class="row">
        <picker class="fl1" mode="selector" :range="userList" @change="changeUser" range-key="name">
          <view class="picker">
            {{ zgName ? zgName : '请选择' }}
          </view>
        </picker>
        <view class="right-icon"><image src="/static/image/arrow_right.png" mode="widthFix" /></view>
      </view>
    </view>
    <!-- <view style="margin: 20px 0">
      <view>备注</view>
      <view class="ipt">
        <textarea class="texta" type="text" v-model="form.remark"></textarea>
      </view>
    </view> -->
    <view class="bottom">
      <button class="btn" @click="handleSubmit">提交</button>
    </view>
  </view>
</template>

<script>
import leeDatetime from '@/components/lee-datetime'
import { getChildSysDeptList, getSysUserList } from '@/service/api/logistics'
import { addOrSave } from '@/service/api/askForLeave'
import { getUserInfo } from '@/service/auth'
export default {
  components: {
    leeDatetime,
  },

  data() {
    return {
      form: {
        zgId: '',
      },
      deptList: [],
      userList: [],
      typeList: [
        { id: 1, name: '事假' },
        { id: 2, name: '公出' },
        { id: 3, name: '年假' },
        { id: 4, name: '病假' },
        { id: 5, name: '调休假' },
        { id: 6, name: '婚假' },
        { id: 7, name: '产假' },
        { id: 8, name: '陪产假' },
        { id: 9, name: '其他' },
      ],
      type: '',
      zgName: '',
      user: {},
      showApprover: false,
    }
  },
  onLoad(option) {
    this.user = getUserInfo()
    if (this.user.postName == '一线员工') {
      //只有一线员工才会显示审批人
      this.showApprover = true
      this.getUserList()
    }
  },
  created() {
    let year = new Date().getFullYear()
    let month = new Date().getMonth() + 1
    let day = new Date().getDate()
    const today = year + '-' + month + '-' + day
    this.$set(this.form, 'busDate', today)
  },
  methods: {
    getUserList() {
      //没有上级主管提示,在后台加一个
      this.uniShowLoading()
      getSysUserList({ deptCode: this.user.deptCode, postName: '主管' })
        .then(res => {
          this.uniHideLoading()

          this.userList = res.content
          console.log('this.userList.size=' + this.userList.length)
          if (this.userList.length == 0) {
            uni.showModal({
              title: '提示',
              content: '无主管，请添加主管',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                  uni.navigateBack({
                    delta: 1,
                  })
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              },
            })
          } else {
            this.zgName = this.userList[0].name
            this.form.zgId = this.userList[0].id
          }
        })
        .catch(err => {
          this.uniHideLoading()
          uni.showToast({ icon: 'error', title: err.msg })
        })
    },
    changeUser(e) {
      const index = e.target.value * 1
      this.zgName = this.userList[index].name
      this.form.zgId = this.userList[index].id
    },
    changedeptId(e) {
      const index = e.target.value * 1
      this.type = this.typeList[index].name
      this.form.type = index + 1
    },
    bindbusDateChange: function (e) {
      this.$set(this.form, 'busDate', e.detail.value)
    },
    handleSubmit() {
      if (this.form.beginTime && this.form.endTime) {
        const start = new Date(this.form.beginTime).getTime()
        const end = new Date(this.form.endTime).getTime()
        if (start > end) {
          uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间' })
          return
        }
      }
      this.uniShowLoading()
      addOrSave(this.form)
        .then(res => {
          this.uniHideLoading()
          uni.showToast({ icon: 'success', title: res.msg })
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          this.uniHideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    bindLeeDateTimeChange(e) {
      this.$set(this.form, 'endTime', e.value)
    },
    startDateChange(e) {
      this.$set(this.form, 'beginTime', e.value)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f4f5f9;
  padding: 20rpx;
  height: 100vh;
  &_box {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    .row {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
    }
    .border-bottom {
      border-bottom: 1rpx solid #f1f1f1;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
    }
  }
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right-icon {
    width: 15rpx;
    image {
      width: 100%;
    }
  }
}
</style>
